iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0

JSON

這篇我們要來介紹JSON是甚麼,讓我們來看看維基百科的說明。
JSON(JavaScript Object Notation)是由道格拉斯·克羅克福特構想和設計的一種輕量級資料交換格式。其內容由屬性和值所組成,因此也有易於閱讀和處理的優勢。JSON是獨立於程式語言的資料格式,其不僅是JavaScript的子集,也採用了C語言家族的習慣用法,目前也有許多程式語言都能夠將其解析和字串化,其廣泛使用的程度也使其成為通用的資料格式。

看完以後是不是覺得還是很難懂呢? JSON其實就是一中資料格式,透過把資料形式轉換成物件及陣列型態,一層一層的包裹起來,而JSON擁有的優勢就是能夠輕量化的交換數據,是儲存數據及傳輸數據的格式。打API到後台所回傳的資料格式就是JSON格式!

JSON格式範例

{
"classmate":[
    {"Name":"Jason", "weight":45}, 
    {"Name":"Dina", "weight":58},
    {"Name":"Alan", "weight":50}
]
}

而JSON格式是不是就跟我們平常在JS裡所看到的物件陣列的創建一樣,因為如此JS能夠將JSON格式的資料轉換為JS物件。

JSON規則
當然我們在使用JSON格式的資料時,一定要知道規則是甚麼,否則我們換來的就是紅字的報錯,就像寫函數一樣,我們要宣告時要遵守這個語言的規則!

  • 數據是由一個名稱對上一個值。
  • 數據有多個時由逗號分隔。
  • 花括號保存的是物件。
  • 中括號保存的是陣列。

數據是由一個名稱對上一個值

"Name":"Jason"

JSON數據必須要由一個名稱,一個值來組成,可以把他想成物件即可,在用冒號進行分開,請記得我們的資料一定要加上字串類型的雙引號!在JSON形式上要特別注意,這點與JS不相同。

JSON物件

{"Name":"Jason", "weight":45}

JSON物件由花括號包覆著,物件裡能夠包含多個名稱加上值,也是由逗號所分開。

JSON陣列

"classmate":[
    {"Name":"Jason", "weight":45}, 
    {"Name":"Dina", "weight":58},
    {"Name":"Alan", "weight":50}
]
}

JSON陣列由中括號包覆著,陣列裡包含多個物件,班上同學有三個人,每個人都有自己的資訊(身高、體重、BMI)之類的,這些都是一個人的資料被物件所包著,有三個人則三筆資料。

JSON文字轉換JS物件
那我們今天想把JSON格式轉換成JS物件該怎麼做呢,我們就要使用函數方法JSON.parse()來行動!讓我們來看看範例吧。

範例:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var text = '{"classmate":[' +
'{"Name":"Jason","weight":45 },' +
'{"Name":"Dina","weight":58 },' +
'{"Name":"Alan","weight":50 }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.classmate[1].Name + " " + obj.classmate[1].Name;
</script>

</body>
</html>

這樣結果就會出來是Dina58!我們可以輕鬆地將JSON格式轉換成JS物件,再去取用他。

那今天的文章就到這邊了!謝謝大家,我們明天再一起繼續努力。


上一篇
Day21 Javascript Window
下一篇
Day23 Javascript callback回調
系列文
Javascripts惡補小教室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言